<template>
	<view class="p20 h100vh">
		<u-input placeholder="搜索职位名称" prefixIcon="search" prefixIconStyle="font-size: 40rpx;color: #aaa"
			class="inp ml10">
			<template slot="suffix">
				<u-button @tap="getCode" text="搜索" class="but" size="mini"></u-button>
			</template>
		</u-input>
		<view class="ox-auto bag--fff mt20 br--20 p20">
			<view class="flex ju--around ox-auto w-max">
				<view @click="orderStateChange(item.status)" :class="orderState == item.status ? 'active' : ''"
					class="pr center  vvl40 f16   flex a-center" v-for="(item,index) in tabList" :key="index">
					<view class="mr10">{{item.label}}</view>
					<image src="../../static/xias.svg" mode="widthFix">
					</image>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view oy-auto  pr h100 " @scrolltolower="getMore">
			<view class="p20 bag--fff mt20 br--20" v-for="(item,index) in list"
				@click="goto(`/pages/index/jobdetail?id=${item.id}&lgrc=${0}`)">
				<view class="flex a-center">
					<view class="fw f1 f15 text-hidden-1">
						{{item.title}}
					</view>
					<view class="cred f15">
						{{item.salary}}
						<span class="f10 ml10 co--7676">{{item.salary_unit_name}}</span>
					</view>
				</view>
				<view class="flex a-center ju--between mt30">
					<view class=" f12 flex a-center">
						<view class="bag co--7676">
							{{item.service_city_name}}
						</view>
						<!-- <view class="bag co--7676 ml20">
							桃城
						</view> -->
					</view>
					<view class="co--999 f12">
						1分钟前
					</view>
				</view>
				<view class="flex a-center  mt30">
					<image :src="item.user.avatar|| '../../static/tx.png'" mode="" class="img20 br50"></image>
					<view class="co--999 f12 mlr10">
						赵女士 · 女 · 21岁
					</view>

				</view>
			</view>
			<view class="center fs12 co--999 mt10">
				上滑加载更多
			</view>
		</scroll-view>
		<!-- 选择服务分类弹框 -->
		<uni-popup ref="type" :maskClick="false" background-color="#fff" borderRadius="20px 20px 0px 0px"
			@change="change">
			<view class="descs flex column">
				<view class="flex a-center mb20">
					<view class="f1 fw f16" style="text-align: center;">
						选择服务分类
					</view>
					<image src="../../static/XXX.png" class="img16" @click="close"></image>
				</view>
				<view class="oy-auto h100">
					<view class="f1 flex   ">
						<view class=" f16 f1 ">
							<view class="pt20 pb20 text-hidden-1" v-for="(item,index) in left" :key="index"
								@click="toggleSubList(index)" :class="active==index?'co-zhu':''">
								{{item.name}}
							</view>
						</view>
						<view class="">
							<view class="pt20 pb20" v-for="(ite,ind) in sublist" :key="ind">
								{{ite.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="btn-1 but f16">确认</view>
			</view>
		</uni-popup>
		<bottom :visible.sync="popupVisible"></bottom>
		<Tabbar :current-page="3" @open-modal="popupVisible = true" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupVisible: false, // 用于控制弹窗显示
				orderState: null,
				tabList: [{
					label: '服务分类',
					status: 1
				}, {
					label: '服务地区',
					status: 2
				}],
				pageNo: 1,
				list: [],
				left: [],
				sublist: [],
				active: null

			}
		},
		onLoad() {
			// this.serviceCatList()
			this.getlist()
		},
		methods: {
			resetArr() {
				this.pageNo = 1
				this.list = []
			},
			change() {},
			orderStateChange(id) { // 订单状态变化
				if (this.orderState !== id) {
					this.orderState = id
					// this.resetArr()
					if (this.orderState == 1) {
						this.$refs.type.open('bottom')
						// this.nurseOrderList()
					} else {
						// this.accompanyOrderList()
					}
				}
			},
			getMore() {
				this.pageNo++
				console.log(this.pageNo)
			},
			async getlist() {
				let {
					data
				} = await this.$rqt.servicelists({
					type: 2,
					page_no: this.pageNo
				})
				console.log(data)
				this.list.push(...data.lists)
			},
			close() {
				this.orderState = null
				this.$refs.type.close()
			},
			async serviceCatList() {
				let {
					data
				} = await this.$rqt.serviceCatList()
				console.log(data, 'serviceCatList')
				this.left = data
				if (data && data.length > 0) {
					this.sublist = data[0].sub; // 默认显示第一个父项的子项
				}
			},
			toggleSubList(index) {
				this.active = index
				console.log("切换前的数据", this.sublist);
				this.sublist = this.left[index].sub;
				console.log("切换后的数据", this.sublist);
			}

		},
		created() {
			this.serviceCatList(); // 页面加载时请求数据
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-border {
		border: none;
		background: #fff;
	}

	::v-deep .u-input--radius {
		border-radius: 42rpx !important;
	}

	::v-deep .u-input {
		margin-left: 16rpx;
		font-size: 28rpx;
	}

	::v-deep .u-button {
		width: 120rpx !important;
		height: 56rpx !important;
		border-radius: 28rpx !important;
		background: #0256FF !important;
		color: #fff !important;
		font-size: 28rpx;
	}

	.w-max {
		// width: max-content;
		z-index: 999999;

		.active {
			color: var(--cg);
		}

		image {
			width: 28rpx;
			height: 28rpx;
			// position: absolute;
			// bottom: 10rpx;
			// left: 50%;
			// transform: translateX(-50%);
		}
	}

	.vvl40+.vvl40 {
		margin-left: 20rpx;
	}

	.w3 {
		width: 3em;
	}

	.bag {
		background: #F1F1F1;
		padding: 4rpx;
		border-radius: 4rpx;
	}

	.descs {
		border-radius: 40rpx 40rpx 0 0 !important;
		padding: 20rpx;
		height: 996rpx;
		z-index: 999999 !important;

		.texta {
			margin-top: 52rpx;
			position: relative;
		}

		.bk {
			border-top: 2rpx solid #f5f5f5;
		}

		.hg {
			color: #0256FF;
		}

		.but {
			padding: 22rpx;
		}

		#myTextarea {
			width: 100%;
			// background-color: #666;
			position: relative;
		}

		#charCount {
			position: absolute;
			right: 20rpx;
			bottom: 150rpx;
			color: #c0c0c0;
		}
	}
</style>